<template>
  <el-dialog
    width="900px"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-form :inline="true" ref="ruleForm" :rules="rules" :model="form" label-width="100px">
      <el-row>
        <el-col span="12">
          <el-form-item label="门店名称">
            <el-input v-model="form.s_name" />
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="门店电话">
            <el-input v-model="form.s_telphone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="12">
          <el-form-item label="联系人">
            <el-input v-model="form.s_people" />
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="门店地址">
            <el-input v-model="form.s_address" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="12">
          <el-form-item label="支付宝账户名">
            <el-input v-model="form.s_amount" />
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="支付宝账户">
            <el-input v-model="form.s_alipay_number" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="12">
          <el-form-item label="门头照">
            <crop-upload
              :multiple="false"
              show-type="photo"
              :hide-delete="false"
              :init-val="doorImgUrl"
              wrapper-width="100px"
              wrapper-height="100px"
              :photo-width="100"
              :photo-height="100"
              @setVal="doorImgChange"
            />
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="营业执照">
            <crop-upload
              :multiple="false"
              show-type="photo"
              :hide-delete="false"
              :init-val="companyImgUrl"
              wrapper-width="100px"
              wrapper-height="100px"
              :photo-width="100"
              :photo-height="100"
              @setVal="companyImgChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-image-viewer
      zIndex="5999"
      v-if="showViewer"
      :on-close="showViewer=false"
      :url-list="[$globalObj.imgBaseUrl + previewUrl]"
    />
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeFun">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addShopData, editShopData } from '@/api/user'
import cropUpload from '@/components/cropUpload'
export default {
  components: {
    cropUpload,
  },
  props: {
    mode: {
      type: String,
      default: 'add',
    },
  },
  data() {
    return {
      form: {
        id: '',
        s_name: '',
        s_telphone: '',
        s_address: '',
        s_door_img: '',
        s_company_img: '',
        s_people: '',
        s_amount: '',
        s_alipay_number: '',
      },
      rules: {
        s_name: [{ required: true, message: '门店名称必填', trigger: 'blur' }],
        s_telphone: [{ required: true, message: '门店电话必填', trigger: 'blur' }],
        s_address: [{ required: true, message: '门店地址必填', trigger: 'blur' }],
      },
      dialogVisible: false,
      showViewer: false,
      previewUrl: '',
    }
  },
  computed: {
    dialogTitle() {
      return this.mode === 'add' ? '添加门店' : '编辑门店'
    },
    doorImgUrl() {
      return this.form.s_door_img ? [this.form.s_door_img] : ''
    },
    companyImgUrl() {
      return this.form.s_company_img ? [this.form.s_company_img] : ''
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs['ruleForm'].resetFields()
      }
    },
  },
  methods: {
    initSetForm(setData, isOpen = false) {
      return new Promise((resolve) => {
        for (const key in this.form) {
          if (setData && Object.prototype.hasOwnProperty.call(setData, key)) {
            this.form[key] = setData[key]
          } else {
            this.form[key] = ''
          }
        }
        if (isOpen) this.dialogVisible = true
        resolve(true)
      })
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('表单提交---', this.form)
          if (this.mode === 'add') {
            addShopData(this.form)
              .then((res) => {
                if (res) {
                  this.$message({
                    message: '添加成功',
                    type: 'success',
                  })
                  this.$emit('getList')
                  this.closeFun()
                }
              })
              .catch((e) => {
                this.$message({
                  message: '操作失败',
                  type: 'error',
                })
              })
          } else if (this.mode === 'edit') {
            editShopData(this.form)
              .then((res) => {
                if (res) {
                  this.$message({
                    message: '修改成功',
                    type: 'success',
                  })
                  this.$emit('getList')
                  this.closeFun()
                }
              })
              .catch((e) => {
                this.$message({
                  message: '操作失败',
                  type: 'error',
                })
              })
          }
        } else {
          this.$message({
            message: '请填写完整的信息',
            type: 'error',
          })
          return false
        }
      })
    },
    closeFun() {
      this.dialogVisible = false
    },
    doorImgChange(params) {
      this.form.s_door_img = params
    },
    companyImgChange(params) {
      this.form.s_company_img = params
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
